// 封装一个自定义的方法 解决仓库数据发生变化 视图没有更新
import {useEffect, useState} from "react";
import store from "@/components/17- redux仓库/01- redux/store.js";

const useRenderHooks = (selector) => {
    const [state, setState] = useState(selector(store.getState()));
    useEffect(() => {
        /**
         * subscribe ：订阅仓库数据变化（在 React 组件中特别有用，因为它允许组件在状态变化时重新渲染。）
         *     执行时机：当 store 的状态发生变化时，所有通过 subscribe 方法注册的回调函数都会被调用
         *
         */
            // 注册一个回调函数，当 store 状态变化时调用
        const unsubscribe = store.subscribe(() => {
                setState(selector(store.getState()));
            });
        // 返回一个清理函数，组件卸载时取消订阅
        return () => unsubscribe();
    }, []); // 空依赖数组确保这个 effect 只运行一次
    return state;
}

export default useRenderHooks;